import React from "react";
class Count extends React.Component{
    constructor(){
        super()
    this.stop=null

    }
    // 存放需要渲染到页面中的响应式数据
    state={
        count:0
        
    }
    add=()=>{
        // setState异步更新数据
      this.setState((state,props)=>{
        // state:表示最新的state
        // props:表示最新的props
        // console.log("最新的state1:",state)
        return {
            count:Math.floor(Math.random()*(3-1+1))
        }

      },()=>{
        // console.log("更新后的state:",this.state)
      })

    //   this.setState((state,props)=>{
    //     // state:表示最新的state
    //     // props:表示最新的props
    //     console.log("最新的state2:",state)
    //     return {
    //         count:state.count+1
    //     }

    //   })
      console.log("this.state",this.state)
    }
    shouldComponentUpdate(nextProps,nextState){
        // nextProps:最新的nextProps，
        // nextState：最新的state
        console.log("最新的state:",nextState);
        return !(this.state.count ===nextState.count)
       
    }
    render(){
        console.log("render",this.state.count);
        let el=<div>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={this.add}>生成1-3之间的随机数</button>
    </div>
    // console.log("虚拟DOM",el)
        return el
    }
}

export default Count